<template>
  <div class="attractionsInfo">
    <headers></headers>
    <div class="hotel-detail-container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/hotel' }">酒店列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{ info.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      
      <!-- 酒店详情卡片 -->
      <el-card class="hotel-detail-card" shadow="hover">
        <div class="hotel-detail-content">
          <!-- 左侧轮播图 -->
          <div class="hotel-gallery">
            <el-carousel 
              indicator-position="outside" 
              height="500px" 
              arrow="always"
              class="image-carousel"
            >
              <el-carousel-item v-for="(item, index) in info.images ? info.images.split(',') : []" :key="index">
                <div class="carousel-image-container">
                  <img :src="item" :alt="`${info.name}图片${index+1}`" class="carousel-image">
                </div>
              </el-carousel-item>
            </el-carousel>
            
            <!-- 缩略图预览 -->
            <div class="thumbnail-gallery" v-if="info.images">
              <div 
                v-for="(item, index) in info.images.split(',')" 
                :key="index"
                class="thumbnail-item"
                :class="{ active: activeThumb === index }"
                @click="setActiveThumb(index)"
              >
                <img :src="item" :alt="`缩略图${index+1}`" class="thumbnail-image">
              </div>
            </div>
          </div>
          
          <!-- 右侧信息区 -->
          <div class="hotel-info">
            <h1 class="hotel-name">{{ info.name }}</h1>
            
            <div class="info-tags">
              <el-tag size="small" type="success">推荐</el-tag>
              <el-tag size="small" type="warning">热门</el-tag>
              <el-tag size="small" type="info">舒适</el-tag>
            </div>
            
            <div class="info-item">
              <i class="el-icon-location-outline"></i>
              <span class="label">所属景区：</span>
              <span class="value">{{ info.attractions }}</span>
            </div>
            
            <div class="info-item">
              <i class="el-icon-map-location"></i>
              <span class="label">详细地址：</span>
              <span class="value">{{ info.address }}</span>
            </div>
            
            <div class="intro-section">
              <div class="section-title">
                <i class="el-icon-document"></i>
                <span>酒店介绍</span>
              </div>
              <div class="hotel-intro">{{ info.introduce }}</div>
            </div>
            
            <div class="features-section">
              <div class="section-title">
                <i class="el-icon-s-opportunity"></i>
                <span>酒店特色</span>
              </div>
              <div class="feature-tags">
                <el-tag size="small">免费WiFi</el-tag>
                <el-tag size="small">24小时前台</el-tag>
                <el-tag size="small">健身房</el-tag>
                <el-tag size="small">停车场</el-tag>
                <el-tag size="small">行李寄存</el-tag>
              </div>
            </div>
            
            <div class="book-section">
              <div class="price-info">
                <span class="price-label">起价</span>
                <span class="price-value">¥{{ hotel.length > 0 ? Math.min(...hotel.map(item => item.price)) : '---' }}</span>
                <span class="price-unit">/晚</span>
              </div>
              <el-button 
                type="primary" 
                icon="el-icon-s-order" 
                class="book-button"
                @click="toOrder"
              >立即预订</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 预定对话框 -->
    <el-dialog
      title="酒店预订"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      custom-class="booking-dialog"
    >
      <div class="booking-form">
        <!-- 房型选择 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-house"></i>
            <span>选择房型</span>
          </div>
          <div class="room-options">
            <el-radio-group v-model="radio1" size="medium">
              <el-radio 
                v-for="(item, index) in hotel" 
                :key="index" 
                :label="item.id" 
                border
                class="room-option"
              >
                <div class="room-details">
                  <div class="room-name">{{ item.name }}</div>
                  <div class="room-info">
                    <span class="room-availability">剩余数量: {{ item.num }}间</span>
                    <span class="room-price">¥{{ item.price }}/晚</span>
                  </div>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        
        <!-- 预订详情 -->
        <div class="form-section booking-details">
          <div class="section-title">
            <i class="el-icon-s-order"></i>
            <span>预订详情</span>
          </div>
          <div class="booking-details-form">
            <el-form :model="bookingForm" label-width="100px" label-position="left">
              <el-form-item label="入住日期">
                <el-date-picker
                  v-model="date1"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择预定日期"
                  :picker-options="{
                    disabledDate(time) {
                      return time.getTime() < Date.now() - 8.64e7;
                    }
                  }"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="预订数量">
                <el-input-number 
                  v-model="num" 
                  :min="1" 
                  :max="getMaxRooms()" 
                  size="medium"
                ></el-input-number>
              </el-form-item>
            </el-form>
          </div>
        </div>
        
        <!-- 入住人信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-user"></i>
            <span>入住人信息</span>
          </div>
          <el-form :model="people" label-width="100px" label-position="left">
            <el-form-item label="姓名" required>
              <el-input v-model="people.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" required>
              <el-input v-model="people.tel" placeholder="请输入电话"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" required>
              <el-input v-model="people.idCard" placeholder="请输入身份证号"></el-input>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 订单摘要 -->
        <div class="order-summary" v-if="radio1">
          <div class="summary-title">订单摘要</div>
          <div class="summary-content">
            <div class="summary-item">
              <span>房型</span>
              <span>{{ getSelectedRoom().name }}</span>
            </div>
            <div class="summary-item">
              <span>数量</span>
              <span>{{ num || 1 }}间</span>
            </div>
            <div class="summary-item">
              <span>单价</span>
              <span>¥{{ getSelectedRoom().price }}/晚</span>
            </div>
            <div class="summary-item total">
              <span>总价</span>
              <span>¥{{ (getSelectedRoom().price * (num || 1)).toFixed(2) }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeOrder">取 消</el-button>
        <el-button type="primary" @click="saveOrder">确认预订</el-button>
      </div>
    </el-dialog>
    
    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysHotelById, getSysHotelItemList, saveSysHotelOrder } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  data() {
    return {
      id: "",
      dialogVisible: false,
      content: "",
      date1: "",
      num: 1,
      people: {
        name: "",
        tel: "",
        idCard: ""
      },
      info: {},
      hotel: [],
      radio1: "",
      activeThumb: 0,
      bookingForm: {}
    }
  },
  components: {
    headers,
    bottoms
  },
  methods: {
    getSysHotelItemList() {
      this.loading = true;
      getSysHotelItemList({ id: this.id }).then(res => {
        if (res.code == 1000) {
          this.hotel = res.data;
          this.loading = false;
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    setActiveThumb(index) {
      this.activeThumb = index;
      // 切换轮播图到对应索引
      const carousel = this.$el.querySelector('.el-carousel');
      if (carousel && carousel.__vue__) {
        carousel.__vue__.setActiveItem(index);
      }
    },
    getSelectedRoom() {
      return this.hotel.find(item => item.id === this.radio1) || {};
    },
    getMaxRooms() {
      if (!this.radio1) return 10;
      const selectedRoom = this.getSelectedRoom();
      return selectedRoom.num || 10;
    },
    closeOrder() {
      this.date1 = "";
      this.num = 1;
      this.radio1 = '';
      this.people = {
        name: "",
        tel: "",
        idCard: ""
      };
      this.dialogVisible = false;
    },
    saveOrder() {
      if (!this.date1) {
        this.$message({
          message: '请选择预约时间',
          type: 'warning'
        });
        return;
      }
      if (!this.people.name) {
        this.$message({
          message: '请完善预约人姓名',
          type: 'warning'
        });
        return;
      }
      if (!this.people.tel) {
        this.$message({
          message: '请完善预约人联系方式',
          type: 'warning'
        });
        return;
      }
      if (!this.people.idCard) {
        this.$message({
          message: '请完善预约人证件号',
          type: 'warning'
        });
        return;
      }
      if (!this.radio1) {
        this.$message({
          message: '请选择房型',
          type: 'warning'
        });
        return;
      }
      
      var param = {
        hotelId: this.id,
        num: this.num || 1,
        itemId: this.radio1,
        time: this.date1,
        people: JSON.stringify(this.people)
      };
      
      saveSysHotelOrder(param).then(res => {
        if (res.code == 1000) {
          this.$message({
            message: '预约成功，请等待确认',
            type: 'success'
          });
          this.closeOrder();
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }
      });
    },
    getSysHotelById() {
      this.loading = true;
      getSysHotelById({ id: this.id }).then(res => {
        if (res.code == 1000) {
          this.info = res.data;
          this.loading = false;
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    toOrder() {
      this.dialogVisible = true;
      if (!this.num) this.num = 1;
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getSysHotelById();
    this.getSysHotelItemList();
  }
}
</script>

<style scoped>
/* 整体容器 */
.attractionsInfo {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.hotel-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 面包屑导航 */
.breadcrumb-container {
  margin-bottom: 20px;
  padding: 10px 0;
}

/* 酒店详情卡片 */
.hotel-detail-card {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.hotel-detail-content {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .hotel-detail-content {
    flex-direction: row;
  }
}

/* 轮播图区域 */
.hotel-gallery {
  flex: 1;
  margin-right: 0;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .hotel-gallery {
    margin-right: 30px;
    margin-bottom: 0;
  }
}

.image-carousel {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-image-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* 缩略图区域 */
.thumbnail-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.thumbnail-item {
  width: 80px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.thumbnail-item:hover {
  transform: translateY(-3px);
}

.thumbnail-item.active {
  border-color: #409EFF;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 酒店信息区域 */
.hotel-info {
  flex: 1;
  min-width: 300px;
}

.hotel-name {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-top: 0;
  margin-bottom: 15px;
}

.info-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #606266;
}

.info-item i {
  margin-right: 8px;
  color: #909399;
}

.label {
  font-weight: 500;
  margin-right: 5px;
}

.value {
  color: #303133;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.section-title i {
  margin-right: 8px;
  color: #409EFF;
}

.intro-section, .features-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #EBEEF5;
}

.hotel-intro {
  line-height: 1.6;
  color: #606266;
  text-align: justify;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 预订区域 */
.book-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 14px;
  color: #909399;
  margin-right: 5px;
}

.price-value {
  font-size: 24px;
  font-weight: bold;
  color: #F56C6C;
}

.price-unit {
  font-size: 14px;
  color: #909399;
  margin-left: 5px;
}

.book-button {
  padding: 12px 25px;
  font-size: 16px;
  transition: all 0.3s;
}

.book-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 预订表单 */
.booking-dialog >>> .el-dialog__header {
  padding: 20px;
  background: #409EFF;
  color: white;
}

.booking-dialog >>> .el-dialog__title {
  color: white;
  font-weight: 500;
}

.booking-form {
  padding: 10px;
}

.form-section {
  margin-bottom: 30px;
}

.room-options {
  margin-top: 15px;
}

.room-option {
  margin-bottom: 15px;
  width: 100%;
  display: block;
}

.room-option >>> .el-radio__label {
  width: 100%;
}

.room-details {
  padding: 5px 0;
}

.room-name {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 5px;
}

.room-info {
  display: flex;
  justify-content: space-between;
  color: #606266;
}

.room-price {
  font-weight: 500;
  color: #F56C6C;
}

.booking-details-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* 订单摘要 */
.order-summary {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.summary-title {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #606266;
}

.summary-item.total {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #DCDFE6;
  font-weight: 500;
  color: #303133;
}

.summary-item.total span:last-child {
  color: #F56C6C;
  font-size: 18px;
  font-weight: bold;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .hotel-detail-container {
    padding: 10px;
  }
  
  .booking-dialog {
    width: 95% !important;
  }
  
  .room-info {
    flex-direction: column;
  }
}
</style>